import React from "react";
import {NavLink} from 'react-router-dom'
import User from "../User";
import './index.css'


export default function Nav(){

    function calClassName({isActive}){
        return isActive?'isActive':""
    }

    return(
        <div role={'navigation'} className={'navbar navbar-default'}>
            <div className={'container-fluid'}>
                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                <a className="navbar-brand" href="#">Brand</a>
                <div className={'collapse navbar-collapse '}>
                    <ul className={'nav navbar-nav'}>
                        <li role={'presentation'}>
                            <NavLink to="/home" className={calClassName}>首页</NavLink>
                        </li>
                        <li role={'presentation'}>
                            <NavLink to="/competition" className={calClassName}>比赛</NavLink>
                        </li>
                        <li role={'presentation'}>
                            <NavLink to="/team" className={calClassName}>组队</NavLink>
                        </li>
                        <li role={'presentation'}>
                            <NavLink to="/share" className={calClassName}>分享</NavLink>
                        </li>
                        <li role={'presentation'}>
                            <NavLink to="/statistics" className={calClassName}>统计</NavLink>
                        </li>
                    </ul>
                    <form className="navbar-form navbar-left" action={"#"}>
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search"/>
                        </div>
                        <button type="submit" className="btn btn-default">Submit</button>
                    </form>
                    <ul className={'nav navbar-nav navbar-right'}>
                        <li><User/></li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

